<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2.key的原理</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <button @click.once="add">添加一个人员</button>
        <ul>
            <li v-for="(person,index) in personList" :key="person.id">
                {{person.name}} -- {{person.age}}
                <input type="text">
            </li>
        </ul>
        <hr>


        <script type="text/javascript">
            new Vue({
                el: '#root',
                data() {
                    return {
                        personList: [
                            { id: '001', name: '张三', age: 18 },
                            { id: '002', name: '李四', age: 19 },
                            { id: '003', name: '王五', age: 20 },
                        ],
                        car: {
                            color: 'red',
                            name: 'Chery',
                            price: '$14.5'
                        },
                        tetStr: 'test110'
                    }
                },
                methods: {
                    add() {
                        const p = { id: '004', name: '赵六', age: 32 };
                        //  数组的前方添加一个元素
                        this.personList.unshift(p);
                    }
                },
            });
        </script>

</body>

</html>